<script setup>
import {computed, onMounted, onUpdated, ref, watch} from "vue";
import {useNavStore} from "@/store/nav.js";
import {useRoute, useRouter} from "vue-router";

// 需要传递侧边栏渲染的内容
const props = defineProps(['items'])
const menu = ref()
const navStore = useNavStore()

const items = computed(() => {
    let temp = props.items
    temp.unshift({
        menuName: '首页',
        icon: 'House',
        menuUrl: '/'
    })
    return temp
})

function handleClick(menu) {
    navStore.addNav({
        name: menu.menuName,
        path: menu.menuUrl
    })
    navStore.addTab({
        name: menu.menuName,
        title: menu.menuName,
        path: menu.menuUrl
    })
}

const route = useRoute()
// 当前激活的菜单
const active = computed(() => {
    return route.path
})

// 侧边栏是否折叠
watch(() => navStore.collapse, (val) => {
    getWindowHeight()
})

// 修改侧边栏的高度
function getWindowHeight() {
    // 屏幕高度
    document.querySelector('.el-menu').style.height = window.innerHeight + "px"
}

// 监听 窗口大小变化
onMounted(() => {
    getWindowHeight()
    window.addEventListener('resize', getWindowHeight);
})

onUpdated(() => {
    getWindowHeight()
})

</script>

<template>
    <el-menu
        :collapse="navStore.collapse"
        ref="menu"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        :default-active="active"
        :collapse-transition="false"
    >
        <!--logo-->
        <el-menu-item>
            <img src="@/assets/img.png" alt="logo" class="logo_img" v-if="!navStore.collapse"/>
            <img src="@/assets/logo.png" alt="logo" class="logo_img" v-else/>
        </el-menu-item>
        <el-menu-item :index="menu.menuUrl" v-for="menu in items" @click="handleClick(menu)">
            <Icon :icon="menu.icon" class="el-icon"/>
            <span>{{ menu.menuName }}</span>
        </el-menu-item>
    </el-menu>
</template>

<style scoped>
.logo_img {
    height: 40px;
}
</style>